<template>
  <div>
    <div class="mainView-dialog">
        <div class="iconfont logoicon icon-icon-test-copy-copy dialog-logo"></div>
        <p>{{$t('wallet.smjy')}}</p>
        <!-- 支付二维码 -->
        <div class="walletCode">
          <div class="codebox" v-loading="loadingCode">
            <canvas id="payCode"></canvas>
            <img class="logocode" :src="handleGetWalletLogo()">
            <div class="overdueCode flexc" v-if="overdueCode">
              <span style="color: #999">{{$t('wallet.codeover')}}
              <a @click="handleNewTransferCode">{{$t('wallet.shuaxin')}}</a></span>
            </div>
          </div>
        </div>
        <div class="gray">{{$t('wallet.eosname')}}</div>
        <div class="accountName" v-if="$store.state.app.scatter.identity">
          {{$store.state.app.scatter.identity.accounts[0].name}}</div>
        <div class="tipOut flexc">
          <div class="tip">
            <!-- 买入 -->
            <div class="tipContent" v-if="payData.type === 1">
              <p class="buyCurrency color-lv">{{$t('jy.purchase')}} {{payData.coin}}</p>
              <p>{{ $t('jy.purchasep') }}：{{payData.price}} {{payData.jijiaCoin}}</p>
              <p>{{ $t('jy.purchasen') }}：{{payData.number}} {{payData.coin}}</p>
              <p>{{ $t('jy.jyed') }}：{{payData.money}} {{payData.jijiaCoin}}</p>
            </div>
            <!-- 卖出 -->
            <div class="tipContent" v-if="payData.type === 2">
              <p class="buyCurrency color-ho">{{$t('jy.sellOut')}} {{payData.coin}}</p>
              <p>{{ $t('jy.sellOutp') }}：{{payData.price}} {{payData.jijiaCoin}}</p>
              <p>{{ $t('jy.sellOutn') }}：{{payData.number}} {{payData.coin}}</p>
              <p>{{ $t('jy.jyed') }}：{{payData.money}} {{payData.jijiaCoin}}</p>
            </div>
            <!-- 兑换 -->
            <div class="tipContent" v-if="payData.type === 3">
              <p class="buyCurrency color-ho flex">{{payData.jijiaCoin}}
                <span style="margin-top: -2px; padding: 0 5px">→</span> {{payData.coin}}</p>
              <p>{{ $t('swap.s83') }}：{{payData.money}} {{payData.jijiaCoin}}</p>
              <p>{{ $t('swap.s84') }}：{{payData.number}} {{payData.coin}}</p>
              <!-- <p>{{ $t('jy.jyed') }}：{{payData.money}} {{payData.jijiaCoin}}</p> -->
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { walletsLogo } from '@/utils/wallet';
import simple from '@/utils/eos/simpleWallet'

export default {
  data() {
    return {
      loadingCode: false,
      overdueCode: false, // 是否过期
      checkPayPost: false,
      overdueTimestamp: '', // 二维码过期时间
      uuID: '',
      timer: null,
    }
  },
  props: {
    tradingPay: Boolean,
    payData: {
      type: Object,
      default: (() => {
        const params = {
          type: 1, // 1买入， 2卖出
          coin: 'NDX', // 买卖币种
          jijiaCoin: 'EOS', // 计价币种
          price: '0.0000 EOS', // 价格
          number: 1, // 数量
          money: '0.0000 EOS' // 交易额
        }
        return params
      })
    },
  },
  watch: {
    tradingPay: function change(val) {
      if (val) {
        this.loadingCode = false;
        this.overdueCode = false; // 是否过期
        this.handleGetPayCode();
        return;
      }
      this.checkPayPost = false;
    }
  },
  mounted() {
    this.handleGetPayCode();
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },
  methods: {
    handleGetPayCode() {
      this.loadingCode = true;
      this.overdueCode = false;
      const params = this.payData.action;
      this.$nextTick(() => {
        setTimeout(async () => {
          const tag = document.getElementById('payCode');
          if (tag) {
            const result = await simple.init(params, tag, this);
            if (result.code === 0) {
              this.overdueTimestamp = result.overdueTimestamp;
              this.uuID = result.uuID;
              this.checkPayPost = true;
              this.handleWalletTransfer();
            }
            this.loadingCode = false;
          }
        }, 800);
      })
    },
    // 刷新二维码
    handleNewTransferCode() {
      this.handleGetPayCode();
    },
    // 获取钱包的logo
    handleGetWalletLogo() {
      return walletsLogo();
    },
    // 轮循验证是否转账成功
    handleWalletTransfer() {
      const params = {
        timestamp: Math.floor(this.overdueTimestamp / 1000) + 300,
        uuid: this.uuID
      };
      this.$http.post('/account/checkTransferStatus', params).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        if (res.status === 0 && this.checkPayPost) {
          // 未有数据回调
          if (this.timer) {
            clearTimeout(this.timer);
          }
          this.timer = setTimeout(() => this.handleWalletTransfer(), 1000);
          return;
        }
        if (res.status === 1) {
          // 转账成功
          this.walletConfig = null;
          this.tradingPay = false;
          this.$message.success(this.$t('jy.success1'));
          return;
        }
        if (res.status === 2) {
          // 转账失败
          this.walletConfig = null;
          this.tradingPay = false;
          this.$message.error(this.$t('wallet.orderError'));
        }
        if (res.status === 3) {
          // 转账时间过期
          this.overdueCode = true;
        }
        if (res.status === 4) {
          // 用户取消
          this.walletConfig = null;
          this.tradingPay = false;
        }
      });
    },
  },
}
</script>

<style lang="scss" scoped>

$-clolor: #13A0F9;
// dialog 样式
.mainView-dialog{
  color: white;
  text-align: center;
  padding-top: 20px;

  .gray {
    margin-top: 5px;
    opacity: 0.8;
    font-size: 12px;
  }

  .accountName{
    padding-top: 5px;
    font-size: 16px;
  }

  .btnDiv{
    margin: 22px 0px;
  }

  .tipOut{
    margin-top: 20px;
    // height: 100px;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    .tip{
      padding: 10px 0px 20px;
      width: 530px;
      margin: auto;

      .tipTop{
        color: #3F99DC;
        padding: 10px 0px;
      }

      .tipContent{
        padding-left: 180px;
        // height: 60px;
        // background: url('../../../assets/img/phone_icon.png') center left no-repeat;

        .buyCurrency {
          margin: 10px 0 5px;
        }

        p {
          text-align: left;
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}

.walletCode {
  padding: 10px 0 10px;

  .codebox {
    position: relative;
    width: 240px;
    height: 240px;
    margin: auto;

    .canvasbox {
      width: 100%;
    }

    .logocode {
      padding: 2px;
      position: absolute;
      width: 26px;
      height: 26px;
      left: 50%;
      top: 50%;
      border-radius: 5px;
      background: #fff;
      transform:translate3D(-50%, -50%, 0);
    }

    .overdueCode {
      background: rgba(255, 255, 255, .9);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

      span {
        min-width: 100%;
      }

      a {
        display: block;
      }
    }
  }

  p {
    color: #999;
    padding: 10px 0;
  }

  a {
    color: $-clolor
  }

  .activebox {
    font-size: 12px;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 20px;
    margin: 10px 0 0;
    background: RGBA(255, 239, 239, 1.00);
    color: RGBA(255, 70, 70, 1.00);
  }
}
</style>
